<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-13 11:12:20
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-17 23:21:57
 * @FilePath: \vue3_admin_template\project\src\components\PublicMap\MapControl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!--===================== 地图底图切换=========================================--->
  <mapTypeChange
    :mapList="mapList"
    @changeMapTemplate="changeMapTemplate"
    class="mapChange"
  ></mapTypeChange>
</template>

<script setup lang="ts">
//引入图标
import tdt_terr from '@/assets/resource/tdt_terr.jpg'
import tdt_img from '@/assets/resource/tdt_img.jpg'
import tdt_vec from '@/assets/resource/tdt_vec.jpg'
import useMapStore from '@/store/modules/map'
import mapTypeChange from '@/components/PublicMap/mapTypeChange.vue'
import { onMounted, ref, watch } from 'vue'
let map: any
let oldlayerCaId = ref('')
onMounted(() => {
  map = useMapStore().map
})
//底图切换模板列表
const mapList = [
  {
    id: '00000001',
    name: '地形',
    layerId: 'tdt_terr',
    icon: tdt_terr,
  },
  {
    id: '00000002',
    name: '影像',
    layerId: 'tdt_satellite',
    icon: tdt_img,
  },
  {
    id: '00000003',
    name: '矢量',
    layerId: 'tdt_vector',
    icon: tdt_vec,
  },
  // {
  //   name: "地名",
  //   layerId: "tdt_cvatest",
  //   icon:"@/assets/resource.png/tdt_vec.jpg"
  // },
]

//地图地图切换功能
const changeMapTemplate = (paramsObj: any) => {
  let layers = map.getStyle().layers
  // console.log("layers", layers)
  // console.log("layers-paramsObj", paramsObj)
  oldlayerCaId.value = paramsObj.layerCaId
  if (paramsObj.isTerrName) {
    //展示地名
    mapList.forEach((item) => {
      const showStatus = item.layerId === paramsObj.layerId ? 'visible' : 'none'
      map.setLayoutProperty(item.layerId, 'visibility', showStatus)
    })
    const showStatus = paramsObj.isTerrName ? 'visible' : 'none'
    map.setLayoutProperty(paramsObj.layerCaId, 'visibility', showStatus)
    map.moveLayer(paramsObj.layerCaId, layers[layers.length - 1].id) //将地名注记图层移动到最上层          // console.log("layers", layers)
  } else {
    //改变其他图层
    mapList.forEach((item) => {
      const showStatus = item.layerId === paramsObj.layerId ? 'visible' : 'none'
      map.setLayoutProperty(item.layerId, 'visibility', showStatus)
    })
    // const showStatus = paramsObj.isTerrName ? 'visible' : 'none'
    map.setLayoutProperty('tdt_ctatest', 'visibility', 'none')
    map.setLayoutProperty('tdt_ciatest', 'visibility', 'none')
    map.setLayoutProperty('tdt_cvatest', 'visibility', 'none')
  }
}
watch(
  () => {
    return oldlayerCaId.value
  },
  (oldValue) => {
    if (oldValue) {
      //当切换地图模板时,将上一地形模板注记图层关闭
      map.setLayoutProperty(oldValue, 'visibility', 'none')
    }
  },
)
</script>

<style lang="scss" scoped></style>
